button {
  &.btn {
    border-width: 0;

    &:active,
    &:hover,
    &:focus {
      box-shadow: none;
    }

    &.btn-default {
      background-color: var(--color-button-default-bg);
      border-color: var(--color-button-default-border);
      border-radius: $border-radius-input;
      border-width: 0.15rem;
      color: var(--color-button-default-text);
      font-size: 1.2rem;
      font-weight: 800;
      line-height: 2.5rem;
      max-width: 90vw;
      padding: 0 1.2rem;
      transition-duration: 0.2s;
      transition-property: background-color, border-color, color;
      transition-timing-function: ease-in-out;

      &[disabled] {
        background-color: var(--color-button-default-bg-disabled);
        border-color: var(--color-button-default-border-disabled);
        color: var(--color-button-default-text-disabled);
        cursor: default;
        opacity: 0.5;
      }

      .well & {
        background-color: var(--color-well-button-bg);
        border-color: var(--color-well-button-border);
        border-width: 0.1rem;
        color: var(--color-well-button-text);
        font-weight: 400;

        &[disabled] {
          background-color: var(--color-well-button-bg-disabled);
          border-color: var(--color-well-button-border-disabled);
          color: var(--color-well-button-text-disabled);
        }

        .spinner-border-sm {
          @include spinner-colour(var(--color-well-button-text));

          border-width: 0.1em;
          height: 0.85rem;
          width: 0.85rem;
        }

        @media (hover: hover) {
          &:not([disabled]):active,
          &:not([disabled]):hover {
            background-color: var(--color-well-button-bg-hover);
            border-color: var(--color-well-button-border-hover);
            color: var(--color-well-button-text-hover);

            .spinner-border-sm {
              @include spinner-colour(var(--color-well-button-text-hover));
            }
          }
        }
      }

      &.working {
        @include ellipsis;

        opacity: 1 !important;
      }

      @media (hover: hover) {
        &:not([disabled]):active,
        &:not([disabled]):hover {
          background-color: var(--color-button-default-bg-hover);
          border-color: var(--color-button-default-border-hover);
          color: var(--color-button-default-text-hover);

          .spinner-border-sm {
            @include spinner-colour(var(--color-button-default-text-hover));
          }
        }

        &:not([disabled]):focus {
          text-decoration: underline;

          &:active,
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  &:active,
  &:active:focus,
  &:focus,
  &:hover {
    outline: 0;
  }

  .spinner-border-sm {
    @include spinner-colour(var(--color-button-default-text));

    height: 1.05rem;
    margin-right: 0.25rem;
    width: 1.05rem;
  }
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  &.vertical {
    align-items: center;
    flex-direction: column;
  }

  button {
    margin: 0 0 0.75rem;
  }
}
